<template>
	<view>
		<u-navbar bgColor="#FFFFFF" title="私教" placeholder :titleStyle="titleStyle" leftIconColor="#E6A5B4"
			@leftClick="onBackClick">

		</u-navbar>
		<view style="position: relative;">
			<image class="topIv" :src="teachData.avatar" mode="widthFix"></image>

			<view style="height: 100%; background-color: #FFFFFF; top: 328rpx; position: absolute; width: 100%; ">
				<view class="introduceV">
					<view class="introduceTopV">
						<image class="avatarIv" :src="teachData.avatar"></image>
						<view class="nameV">
							<view class="nameTv">{{teachData.name}}</view>
							<uni-rate activeColor="#CDB358" color="#4A4A4A" size="20" margin="2" :isFill="true"
								:readonly="true" v-model="teachData.star"></uni-rate>
						</view>
						<view class="rightV">
							<image @click="onCollectionClick()" class="collectionIv"
								:src="teachData.is_collection==1?'../../static/public/collection_to.svg':'../../static/public/collection.svg'">
							</image>
							<button v-if="teachData" class="shareTv" open-type="share">
								<image class="shareIv" src="../../static/public/share.svg"></image>
							</button>
						</view>
					</view>
					<view class="labelV">
						<view class="labelTv" v-for="(txt,pos) in teachData.target">{{txt}}</view>
					</view>
					<view class="prizeV">
						<view class="prizeTv">{{teachData.content}}</view>
					</view>
				</view>

				<view class="tabV">
					<view class="tabV1">
						<u-tabs :list="tabList" lineColor="#00000000" :activeStyle="activeStyle"
							:inactiveStyle="inactiveStyle" @change="tabChange" />
					</view>

					<view class="listBg">
						<u-grid v-if="tabPos==0" col="2">
							<u-grid-item v-for="(item,key) in dataSiList" :key="key">
								<view class="itemV" @tap="onItemClick(item)">
									<image class="itemIv" :src="item.image" mode="aspectFill"></image>
									<view class="itemTv">{{item.title}}</view>
								</view>
							</u-grid-item>
						</u-grid>

						<view v-if="tabPos==1" class="xunlianV" v-for="(data,key) in dataXunLianList" :key="key">
							<view class="juliV" @click="onMapClick(data)">
								<view class="juliTv1">{{data.shop_name }} {{ data.distance}}</view>
								<view class="juliTv2">查看地图 ></view>
							</view>
							<view class="xunlianItemV" :style="{backgroundImage:'url('+item.bg+')'}"
								v-for="(item,pos) in data.list" :key="pos">
								<view class="xunlianTopV">
									<view class="xunlianTopVV">
										<view class="xunlianTopTv1">{{item.title}}</view>
										<view class="xunlianTopTv2">¥{{item.price}}</view>
									</view>
									<view @tap="onItemXunLianClick(item,data)" v-if="item.is_sub==0"
										class="xunlianTopTv3">预约</view>
									<view v-if="item.is_sub==1" class="xunlianTopTv4">已预约</view>

								</view>
								<view class="xunlianBottomV">{{item.time}}</view>
							</view>
						</view>

						<view v-if="tabPos==2" class="tuankeV">
							<view class="timeBg">
								<view class="itemTimeV" v-for="(item,key) in dataTuanKeTime" :key="key">
									<view :class="key==dataListPos?'timeTv':'timeTvTo'">{{item.day}}</view>
									<view :class="key==dataListPos?'dayTv':'dayTvTo'"
										@click="onSelectTimeClick(item,key)">{{item.week}}
									</view>
								</view>
							</view>
							<view class="contentV" v-for="(item,key) in dataTuanKeList" :key="key">
								<view class="titleV">
									<view class="leftV">
										<view class="leftTv1">{{item.name}}</view>
										<view class="leftTv2">{{item.distance}}</view>
									</view>
									<view class="rightV" @click="onMapClick(item)">查看地图
										<u-icon name="arrow-right" color="#BCBBBC" size="13"></u-icon>
									</view>
								</view>
								<view class="typeBg">
									<view class="typeItemBg" v-for="(data,index) in item.course_list" :key="index"
										@click="onItemTuanKeClick(data)">
										<image class="typeIv" :src="data.image" mode="aspectFill"> </image>
										<view class="typeRightV">
											<view class="typeTitleTv">{{data.title}}</view>
											<view class="typeBottomV">
												<view class="centerV">
													<view class="timeMoney">
														<view class="timeTv">{{data.time}}</view>
														<view class="moneyTv">¥{{data.price}}</view>
													</view>
													<text class="labelTv"
														v-for="(txt,pos) in data.target">{{txt}}</text>
												</view>
												<view v-if="data.is_yuyue!=1" class="typeBookingTv">预约</view>
												<view v-if="data.is_yuyue==1" class="typeBookingTvTo">已预约</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="commentsBeans.length>0" class="commentsV">
					<view class="commentsTitleTv">用户评价</view>
					<view class="commentsListV" v-for="(item,key) in commentsBeans" :key="key">
						<view class="commentsItemV">
							<image class="avatarIv" :src="item.avatar"></image>
							<view class="centerV">
								<view class="nameTv">{{item.nickname}}</view>
								<view class="timeTv">{{item.time}}</view>
							</view>
							<image @click="onZanClick(item)" v-if="item.is_zan==0" class="zanIv"
								src="../../static/public/zan.svg"></image>
							<image @click="onZanClick(item)" v-if="item.is_zan==1" class="zanIv"
								src="../../static/public/zan_to.svg"></image>

						</view>
						<view class="commentsItemTxt">{{item.content}}</view>
						<view class="commentsItemLine"></view>
					</view>
					<view class="commentsMoreTv" @click="onMoreCommentsClick">查看更多评论</view>
				</view>
			</view>
		</view>

		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				activeStyle: {
					"color": "#E6A5B4D",
					"font-size": "36rpx"
				},
				inactiveStyle: {
					"color": "#8D8D8D",
					"font-size": "32rpx"
				},
				tabList: [{
					name: '私教',
					id: 0
				}, {
					name: '训练营',
					id: 1
				}, {
					name: '团课',
					id: 2
				}],
				id: '',
				tabPos: 0, //0私教  1训练营  2团课
				teachData: {},
				commentsBeans: [],
				dataSiList: {}, //私教
				dataXunLianList: {}, //训练营
				dataTuanKeTime: {}, //团课时间
				dataTuanKeList: {}, //团课
				dataListPos: 0,
				mDay: '',
				userId: ''
			}
		},
		onLoad(op) {
			console.log("==" + JSON.stringify(op))
			this.id = op.id;
			this.userId = op.userid;

			if (uni.getStorageSync("user_info")) {
				this.getTeachDetail();
				this.getCommentList();
				this.getPersonal();
				this.getBind();
			} else {
				this.$refs.login.open({
					show: false
				});
			}
		},
		onShareAppMessage: function(res) {
			console.log("开始分享接收参数--->" + JSON.stringify(res))
			let shopId = this.id;
			let userId = uni.getStorageSync("user_info_id");
			return {
				title: this.teachData.name,
				path: `pages/schedule/TeachDetails?id=` + shopId + `&userid=` + userId, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		methods: {
			onUserInfoClick(e) {
				console.log("======" + JSON.stringify(e))
				if (e.code == 200) {
					this.getTeachDetail();
					this.getCommentList();
					this.getPersonal();
					this.getBind();
				} else {

				}
			},
			getBind() { //绑定上下级
				if (this.userId == undefined || this.userId.length == 0) {
					return;
				}
				this.$api.getBind({
					share_id: this.userId,
				}).then((res) => {

				}).catch((e) => {

				})
			},
			onBackClick() {
				let pages = getCurrentPages();
				if (pages[pages.length - 2]) {
					//如果有上一页，就返回上一页
					wx.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/app/Home'
					});
				}

			},
			tabChange(index) {
				this.tabPos = index.id
				if (index.id == 0) {
					this.getPersonal();
				} else if (index.id == 1) {
					this.getTeachCampList()
				} else if (index.id == 2) {
					this.getEducationList()
				}

			},
			getTeachDetail() {
				this.$api.getTeachDetail({
					id: this.id
				}).then((res) => {
					this.teachData = res;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			getPersonal() { //获取私教课
				this.$api.getPersonal({
					coach_id: this.id
				}).then((res) => {
					this.dataSiList = res;
				}).catch((e) => {})
			},
			getTeachCampList() { //获取训练营
				this.$api.getTeachCampList({
					coach_id: this.id
				}).then((res) => {
					this.dataXunLianList = res;
				}).catch((e) => {})
			},
			getEducationList() { //获取团课列表
				this.$api.getEducationList({
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude"),
					day: this.mDay,
					coach_id: this.id
				}).then((res) => {
					this.dataTuanKeTime = res.day7
					this.dataTuanKeList = res.list;
					if (res.day7.length > 0 && this.mDay.length == 0) {
						this.mDay = res.day7[0].day;
						this.getEducationList();
					}
				}).catch((e) => {})
			},
			getCommentList() { //获取评论
				this.$api.getTeachCommentList({
					coach_id: this.id
				}).then((res) => {
					this.commentsBeans = res.list
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onItemClick(item) { //点击私教课
				let userInfo = uni.getStorageSync("user_info");
				if (!userInfo) {
					this.$refs.login.open({
						show: false
					});
				} else {
					this.$u.route({
						url: '/pages/schedule/TeachAdd',
						params: {
							id: this.id,
						}
					})
				}
			},
			onItemXunLianClick(item, data) { //训练营点击
				let userInfo = uni.getStorageSync("user_info");
				if (!userInfo) {
					this.$refs.login.open({
						show: false
					});
				} else {
					this.$u.route({
						url: '/pages/schedule/BootcampAdd',
						params: {
							id: item.id
						}
					})
				}
			},
			onSelectTimeClick(item, key) { //团课时间
				this.dataListPos = key;
				this.mDay = item.day;
				this.getEducationList();
			},
			onItemTuanKeClick(item) {
				this.$u.route({
					url: '/pages/schedule/GroupDetails',
					params: {
						id: item.id,
					}
				})
			},
			onMoreCommentsClick() { //更多评论
				this.$u.route({
					url: '/pages/more/MoreCommentsTeach',
					params: {
						id: this.id,
					}
				})
			},
			onCollectionClick() { //收藏
				this.$api.addCollection({
					type: "coach",
					id: this.id
				}).then((res) => {
					this.getTeachDetail()

				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onZanClick(item) {  //点赞
				uni.showLoading({
					title: '请稍后'
				})
				this.$api.setZan({
					comment_id: item.id
				}).then((res) => {
					uni.hideLoading();
					this.getCommentList();
				}).catch((e) => {
					uni.hideLoading();
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onMapClick(item) {
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.openLocation({
							longitude: parseFloat(item.longitude),
							latitude: parseFloat(item.latitude),
							name: "", //位置名
							address: "", //详细地址
							success: function(res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
							},
							fail(res) {
								console.log("=====" + JSON.stringify(res))
							}
						});
					},
					fail() {
						uni.showModal({
							title: '未打开小程序定位',
							content: '找不到您的位置，请开启定位',
							confirmText: '开启定位',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.openSetting(); // 打开地图权限设置
								}
							}
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.topIv {
		width: 100%;
		height: 328rpx;
	}

	.introduceV {
		background: #E6A5B4;
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.introduceTopV {
			display: flex;
			justify-content: space-between;

			.avatarIv {
				width: 120rpx;
				height: 120rpx;
				min-width: 120rpx;
				max-width: 120rpx;
				border-radius: 50%;
			}

			.nameV {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				.nameTv {
					font-size: 34rpx;
					color: #E8E8E8;
					padding-bottom: 10rpx;
				}

			}

			.rightV {
				display: flex;

				.collectionIv {
					width: 32rpx;
					height: 32rpx;
					min-width: 32rpx;
				}

				.shareIv {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}

				button::after {
					border: none;
				}

				button {
					position: relative;
					display: block;
					margin-left: auto;
					margin-right: auto;
					padding-left: 0px;
					padding-right: 0px;
					box-sizing: border-box;
					text-align: center;
					text-decoration: none;
					line-height: 1.35;
					-webkit-tap-highlight-color: transparent;
					overflow: hidden;
					color: #000000;
					background-color: #00000000;
					width: 100%;
					height: 100%;
				}
			}
		}

		.labelV {
			display: flex;
			align-items: center;
			margin-left: 130rpx;

			.labelTv {
				background: #4A4A4A;
				border-radius: 10rpx 0rpx 10rpx 0rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				padding-top: 2rpx;
				padding-bottom: 2rpx;
				padding-left: 18rpx;
				padding-right: 18rpx;
			}
		}

		.prizeV {
			display: flex;
			margin-top: 30rpx;

			.prizeTv {
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	.tabV {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		.tabV1 {
			width: 100%;
			flex: 1;
		}

		.listBg {
			width: 100%;

			.itemV {
				width: 90%;
				background: #E6A5B4;
				border-radius: 10rpx;
				height: 280rpx;
				margin-bottom: 30rpx;

				.itemIv {
					width: 100%;
					height: 200rpx;
					background-color: antiquewhite;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
				}

				.itemTv {
					width: 100%;
					height: 80rpx;
					font-size: 28rpx;
					color: #E8E8E8;
					display: block;
					white-space: nowrap;
					/* 过长部分不换行 */
					text-overflow: ellipsis;
					/* 过长部分展示省略号 */
					overflow: hidden;
					/* 隐藏过长部分 */
					margin-top: 10rpx;
				}
			}

			.xunlianV {
				.juliV {
					display: flex;
					justify-content: space-between;
					padding-left: 30rpx;
					padding-right: 30rpx;
					margin-top: 30rpx;

					.juliTv1 {
						font-size: 28rpx;
						color: #8D8D8D;
					}

					.juliTv2 {
						font-size: 28rpx;
						color: #8D8D8D;
					}
				}

				.xunlianItemV {
					padding: 30rpx;
					background-color: #E6A5B4;
					margin-left: 30rpx;
					margin-right: 30rpx;
					margin-top: 20rpx;

					.xunlianTopV {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.xunlianTopVV {
							display: flex;
							flex-direction: column;

							.xunlianTopTv1 {
								font-size: 32rpx;
								color: #E8E8E8;
							}

							.xunlianTopTv2 {
								margin-top: 10rpx;
								font-size: 28rpx;
								color: #E8E8E8;
								font-weight: bold;
							}
						}

						.xunlianTopTv3 {
							background: #E6A5B4;
							border-radius: 10rpx;
							padding-left: 30rpx;
							padding-right: 30rpx;
							padding-top: 10rpx;
							padding-bottom: 10rpx;
							border: 1rpx solid #00000000;
							color: #333333;
							font-size: 28rpx;
						}

						.xunlianTopTv4 {
							background: #333333;
							border-radius: 10rpx;
							padding-left: 30rpx;
							padding-right: 30rpx;
							padding-top: 10rpx;
							padding-bottom: 10rpx;
							border: 1rpx solid #E8E8E8;
							color: #e8e8e8;
							font-size: 28rpx;
						}
					}

					.xunlianBottomV {
						font-size: 24rpx;
						color: #E8E8E8;
						margin-top: 15rpx;
					}
				}

			}


			.tuankeV {
				.timeBg {
					height: 150rpx;
					display: flex;

					.itemTimeV {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.timeTv {
							font-size: 24rpx;
							color: #E9E9E9;
						}

						.timeTvTo {
							font-size: 24rpx;
							color: #939393;
						}

						.dayTv {
							width: 50rpx;
							height: 50rpx;
							border: 2px solid #E6A5B4;
							border-radius: 50%;
							font-size: 24rpx;
							color: #E6A5B4;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 20rpx;
						}

						.dayTvTo {
							width: 50rpx;
							height: 50rpx;
							border: 2px solid #4A4A4A;
							background-color: #4A4A4A;
							border-radius: 50%;
							font-size: 24rpx;
							color: #959595;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 20rpx;
						}
					}
				}

				.contentV {
					margin-top: 30rpx;

					.titleV {
						display: flex;
						padding-left: 30rpx;
						padding-right: 30rpx;
						align-items: center;
						justify-content: space-between;

						.leftV {
							display: flex;
							align-items: center;
							justify-content: center;

							.leftTv1 {
								color: #E8E8E8;
								font-size: 32rpx;
							}

							.leftTv2 {
								font-size: 28rpx;
								color: #8D8D8D;
								margin-left: 30rpx;
							}
						}

						.rightV {
							display: flex;
							font-size: 28rpx;
							color: #8D8D8D;
						}
					}

					.typeBg {
						background: #E6A5B4;
						border-radius: 10rpx;
						margin-left: 30rpx;
						margin-right: 30rpx;
						margin-top: 10rpx;

						.typeItemBg {
							height: 198rpx;
							padding-left: 30rpx;
							padding-right: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.typeIv {
								width: 120rpx;
								height: 120rpx;
								border-radius: 50%;
								background-color: #E6A5B4;
							}

							.typeRightV {
								flex: 1;
								margin-left: 20rpx;

								.typeTitleTv {
									font-size: 32rpx;
									color: #E8E8E8;
								}

								.typeBottomV {
									display: flex;
									align-items: center;
									justify-content: center;

									.centerV {
										flex: 1;

										.timeMoney {
											display: flex;

											.timeTv {
												color: #E6A5B4;
												font-size: 28rpx;
											}

											.moneyTv {
												color: #FFFFFF;
												font-size: 28rpx;
												margin-left: 30rpx;
											}
										}

										.labelTv {
											background: #4A4A4A;
											border-radius: 10rpx 0rpx 10rpx 0rpx;
											color: #9B9B9B;
											font-size: 22rpx;
											padding-left: 18rpx;
											padding-right: 18rpx;
											padding-top: 1rpx;
											padding-bottom: 1rpx;
											box-sizing: border-box;
											margin-right: 10rpx;
										}
									}

									.typeBookingTv {
										width: 130rpx;
										height: 60rpx;
										background: #E6A5B4;
										border-radius: 10rpx;
										color: #333;
										font-size: 28rpx;
										display: flex;
										align-items: center;
										justify-content: center;
									}

									.typeBookingTvTo {
										width: 130rpx;
										height: 60rpx;
										background: #00000000;
										border-radius: 10rpx;
										border: 1rpx solid #939393;
										color: #939393;
										font-size: 28rpx;
										display: flex;
										align-items: center;
										justify-content: center;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.commentsV {
		background: #E6A5B4;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-top: 30rpx;

		.commentsTitleTv {
			font-size: 36rpx;
			color: #E8E8E8;
		}

		.commentsListV {
			display: flex;
			flex-direction: column;
			margin-top: 25rpx;

			.commentsItemV {
				display: flex;

				.avatarIv {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #CEF743;
				}

				.centerV {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;

					.nameTv {
						font-size: 28rpx;
						color: #E8E8E8;
					}

					.timeTv {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				.zanIv {
					width: 40rpx;
					height: 40rpx;
					min-width: 40rpx;
				}
			}

			.commentsItemTxt {
				font-size: 28rpx;
				color: #E8E8E8;
				margin-top: 22rpx;
			}

			.commentsItemLine {
				height: 1rpx;
				background: #FFFFFF;
				margin-top: 30rpx;
			}
		}

		.commentsMoreTv {
			width: 100%;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #CEF743;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
